<template>
  <view class="table-body">
    <view class="parent-row">
      <view class="col name">{{ item.goodsTitle||item.staffName }}</view>
      <view class="col">{{ item.quantity }}</view>
      <view class="col">{{ item.samePeriod }}</view>
      <view class="col">{{ item.totalpercentage }}</view>
    </view>
  </view>
</template>
<script>

export default {
  name: "staffListView",
  props: {
    item: Object,
  },
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>
<style scoped lang="scss">
.parent-row {
  background-color: #fff;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.8fr;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #eee;
}

.child-row {
  border-bottom: 1rpx solid #eee;

  &::before {
    content: "";
    position: absolute;
    left: 20rpx;
    top: 50%;
    width: 15rpx;
    height: 1px;
  }

  .child-row-click {
    height: 75rpx;
    grid-template-columns: 2fr 1fr 1fr 0.8fr;
    display: grid;
    align-items: center;
    position: relative;
  }
}

.grandchild-row {
  padding-left: 80rpx; // 三级缩进
  border-top: 1rpx solid #eee;

  .grandchild-row-click {
    height: 75rpx;
    grid-template-columns: 2fr 1fr 1fr 0.8fr;
    display: grid;
    align-items: center;
    position: relative;
  }
}

.col {
  flex: 1;
  text-align: center;
  font-size: 22rpx;
  color: #333;
}

.name {
  text-align: left !important;
  padding-left: 40rpx;
}

.child-row .name {
  padding-left: 80rpx;
}

.action {
  display: flex;
  justify-content: center;
}

</style>